<template>
  <!-- 繁琐写法👎👎 -->
  <div class="box">
    <h2>Son1 子组件, {{ $store.state.msg }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br />
    <button @click="dataMonitor(1)">值 + 1</button>
    <button @click="dataMonitor(5)">值 + 5</button>
    <button @click="dataMonitor(10)">值 + 10</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // count: this.$store.user.state.count,
    };
  },
  methods: {
    dataMonitor(num) {
      this.$store.dispatch("user/requestData", num);
      console.log(this.$store);
    },
  },
  computed: {
    relyOnCount() {
      return this.$store.user.state.count;
    },
  },
  beforeUpdate() {
    const user = {
      // "beForeUpdate: ": this.$store.user.state.count,
    };
    console.table(user);
  },
  updated() {
    // console.log("updated: ", this.$store.state.user.count);
  },
};
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
